<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>谈心谈话</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/LogCss.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.15.1/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        @import url("//unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css");

        #tb1 tr:hover td {
            background-color: #F3F3F3;
        }
        button:hover{
            cursor:pointer;
        }
    </style>
</head>
    <body class="layui-layout-body">
        <div class="layui-layout layui-layout-admin">
            <!-- header -->
            <div th:replace="~{commons/header::header}"></div>
            <!-- left -->
            <div th:replace="~{commons/left::left}"></div>
            <!-- 内容主体区域 -->
            <div class="layui-body" id="app">
                <!-- 全局遮罩 -->


                <div v-if="userInfo" id="userInfo">
                    <div style="background-color: white;width: 50%;height: 80%;margin-top: 2%;margin-left: 15%;">
                        <div style="height: 35px;border-bottom: 1px solid #0C0C0C;">
                            <div><p style="margin-left: 10px;margin-top:7px;font-size: 17px;float: left"><strong>谈心谈话详情</strong></p></div>
                        </div>
                        <table  style="margin: auto;font-size: 12px;">
                            <tr style="height: 60px">
                                <td style="width: 12%;">学号：</td><td><input :value="userInfoArr.stu_id" class="input_td" readonly="readonly"></td>
                                <td style="width: 12%;">学院：</td><td><input :value="userInfoArr.stu_college" class="input_td"  readonly="readonly"></td>
                            </tr>
                            <tr style="height: 60px">
                                <td>专业：</td><td><input :value="userInfoArr.stu_major" class="input_td"  readonly="readonly"></td>
                                <td>班级：</td><td><input :value="userInfoArr.stu_class" class="input_td"  readonly="readonly"></td>
                            </tr>
                            <tr style="height: 60px">
                                <td>谈话对象：</td><td><input :value="userInfoArr.stu_name" class="input_td"  readonly="readonly"></td>
                                <td>时间：</td><td><input :value="userInfoArr.log_stu_date" class="input_td"  readonly="readonly"></td>
                            </tr>
                            <tr style="height: 60px"><td>地点：</td><td colspan="3"><input :value="userInfoArr.log_place" class="input_td"  readonly="readonly"></td></tr>
                            <tr style="height: 100px"><td>内容：</td><td colspan="3"><textarea :value="userInfoArr.log_content" class="input_td"  readonly="readonly" style="width: 90%;height: 80px;resize:none"></textarea></td></tr>
                            <tr style="height: 60px"><td>描述：</td><td colspan="3"><textarea :value="userInfoArr.log_describe" class="input_td"  readonly="readonly" style="width: 90%;height: 40px;resize:none"></textarea></td></tr>
                            <tr style="height: 60px"><td>提交人：</td><td colspan="3"><input :value="userInfoArr.log_sta_name" class="input_td"  readonly="readonly"></td></tr>
                        </table>
                        <div style="text-align: center;margin-top:20px;">
                            <button @click="CloseInfoShow()" style="margin-left: 10px;margin-top:5px;height:35px;width: 100px;border: none;color: black;border-radius: 4px 4px 4px 4px;font-size: 8px;">关闭</button>
                        </div>

                    </div>
                </div>
                <div id="left_table" class="left_table" style="width: 90%;float: left;">
                    <div style="width: 100%;margin-left: 40px;margin-top: 40px;height: 50px;">
                        <div>
                            <input v-model="input[10]" placeholder="提交人" style="width: 25%;height:30px;float: left;border-radius: 3px 3px 3px 3px;border-color: #e0e0e0;border-style:solid;border-width:1px;text-indent: 5px;">
                            <input type="button" value="查询" class="get" @click="GetWorkInfo(input[10])" style="float: left;margin-left: 10px;height:30px;width: 50px;border: none;background-color: rgb(22,155,213);color: white;">
                        </div>
                    </div>
                    <div style="margin-top: 10px;">
                        <table  style="width: 90%; font-size: 16px;text-align: center;margin: 0 auto;border-collapse: separate;border-spacing: 0;border: 2px #e0e0e0;" id="tb1">
                            <div style="width: 30px;">
                                <tr style="background: #efefef;font-size: 14px;">
                                    <td style="height: 50px;border-top-left-radius: 12px;">填报时间</td><td>院系</td><td>年级</td><td>专业</td>
                                    <td>班级</td><td>谈话对象</td><td>提交人</td><td style="border-top-right-radius: 12px;">操作</td>
                                </tr>
                            </div>
                                <tr v-for="(user,index) in arr" style="height: 60px;border-bottom: 2px solid #eaeaea;font-size: 13px;">
                                    <td style="color: #00a7d0">{{user.log_stu_date}}</td><td>{{user.stu_college}}</td>
                                    <td>{{user.stu_grade}}</td><td>{{user.stu_major}}</td>
                                    <td>{{user.stu_class}}</td><td>{{user.stu_name}}</td>
                                    <td>{{user.log_sta_name}}</td>
                                    <td>
                                        <button @click="showUserInfo(arr[index])" style="background-color:transparent;border-style:none;color: #00a7d0;">详情</button>
                                    </td>
                                </tr>
                        </table>
            </div>
        </div>
        <script th:src="@{/layui/layui.js}"></script>
        <script>
            layui.use('element', function() {
                var element = layui.element;
            });
            new Vue({
                    el:"#app",
                    data:{
                        log:[1,1,1,1],
                        arr:[],
                        userInfoArr:[],
                        input:[],
                        input1:[],
                        showLogInfo:false,
                        userInfo:false,
                        showUpData:false,
                        userId:[[${session.loginInfo.userId}]],
                        pageSize:0,
                        lastPageNum:0,
                        select:[],
                    },
                    mounted(){
                        this.GetInfo();
                    },
                    methods:{
                        //获取谈话记录
                        GetInfo:function () {
                            var that = this;
                            axios.get("http://localhost:8443/LogTalkList").then(function (response) {
                                console.log(response.data);
                                that.arr = response.data;
                                this.pageSize=response.data.length/6;
                                this.lastPageNum=response.data.length%6;
                            },function (err) {
                                console.log(err);
                            })
                        },

                        GetWorkInfo:function (log_sta) {

                            if (log_sta != null && log_sta!="") {
                                var that = this;
                                axios.get("http://localhost:8443/LogStaTalkList/" + log_sta).then(function (response) {
                                    console.log(response.data);
                                    that.arr = response.data;
                                }, function (err) {
                                    console.log(err);
                                })
                            }else {
                                this.GetInfo();
                            }
                        },


                        //详情资料
                        showUserInfo:function(arr){
                              this.userInfo=true;
                              this.userInfoArr=arr;
                        },

                        CloseInfoShow:function () {
                            this.userInfo=false;
                        },

                        //导出
                    }
                }
            )
        </script>
    </body>
</html>